revision:
Click the button and wait for 3 seconds.
code:
<div>
<p>Click the button and wait for 3 seconds.</p>
<button onclick="setTimeout(wait, 3000);">press me</button>
<p id="tijd" style="font-size:1.15vw; color: magenta;"></p>
</div>
<style>
button{position: relative; width: 5vw; height: 2vw; cursor: pointer;}
</style>
<script>
function wait() {
var pText = document.getElementById("tijd");
pText.innerHTML = "Welcome to this page!";
}
</script>
Press the first button and wait 4 seconds.
Press the second button before 4 seconds to prevent the first button to execute.
code:
<div>
<p>Press the first button and wait 4 seconds.</p>
<p>Press the second button before 4 seconds to prevent the first button to execute.</p>
<button onclick="startFunction()">press me</button>
<button onclick="stopFunction()">stop</button>
<p id="tijd2" class="spec" style="font-size:1.15vw; color: red;"></p>
</div>
<style>
button{position: relative; width: 5vw; height: 2vw; cursor: pointer;}
</style>
<script>
var setTimeout_ID;
function startFunction() {
setTimeout_ID = setTimeout(function () {
var pText2 = document.getElementById("tijd2");
pText2.innerHTML = "Again, welcome to this page!";
}, 4000);
}
function stopFunction() {
clearTimeout(setTimeout_ID);
}
</script>
code:
<div>
<button onclick="counter()">press me</button>
<h3>10</h3>
</div>
<style>
button{position: relative; width: 5vw; height: 2vw; cursor: pointer;}
</style>
<script>
let count = 10;
function counter() {
var h3Heading = document.getElementsByTagName("h3")[0];
var countDown_ID = setInterval(function () {
count--;
h3Heading.innerHTML = count;
if (count <= 0) {
h3Heading.innerHTML = "Welcome to this page!";
clearInterval(countDown_ID);
}
}, 1000);
}
</script>
a script on this page starts this clock:
code:
<div>
<h3>start timer : </h3>
<p class="spec">a script on this page starts this clock:</p>
<p class="spec" id="demo"></p>
</div>
<style>
#demo{position: relative; width: 10vw; height: 2vw; padding: 1vw; border: 0.2vw solid darkgrey;
color: blue; background-color: lightgrey;}
</style>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
</script>
A script on this page starts this clock:
code:
<div>
<h3>stop timer</h3>
<p>A script on this page starts this clock:</p>
<button onclick="stop()">stop time</button>
<p class="spec" id="demo2"></p>
</div>
<style>
#demo2{position: relative; width: 10vw; height: 2vw; padding: 1vw; border: 0.2vw solid darkgrey;
color: blue; background-color: lightgrey;}
</style>
<script>
var Var = setInterval(Timer, 1000);
function Timer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo2").innerHTML = t;
}
function stop() {
clearInterval(Var);
}
</script>
The setInterval() method executes the setColor() function once every second,
which will toggle between two background colors.
code:
<div>
<h3>executes setColor()</h3>
<p class="spec">The setInterval() method executes the setColor() function once every second, <br>
which will toggle between two background colors.</p>
<div id="div1"></div><br>
<button onclick="stopColor()">stop toggling</button>
</div>
<style>
#div1{width: 30vw; height: 10vw; border:0.5vw outset burlywood;}
</style>
<script>
const div = document.getElementById("div1")
var color = setInterval(setColor, 1000);
function setColor() {
div.style.backgroundColor = div.style.backgroundColor == "yellow" ? "red" : "yellow";
}
function stopColor() {
clearInterval(color);
}
</script>
code:
<div>
<h3>executes move()</h3>
<button onclick="move()">move</button><br><br>
<div id="moveBar">this is a div element</div>
</div>
<style>
#moveBar{background-color: dodgerblue; width: 25%;}
</style>
<script>
function move() {
var elem = document.getElementById("moveBar");
var width = 0;
var idVar = setInterval(change, 10);
function change() {
if (width == 100) {
clearInterval(idVar)
}
else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
Coffee list:
code:
<div>
<h3>list of coffees - setInterval()</h3>
<p class="spec" style="text-decoration: underline;">Coffee list:</p>
<ul class="spec" id="coffees"></ul>
</div>
<script>
var ul = document.getElementById("coffees");
let i = 0;
let coffees = ["Cortado", "Macchiato", "Mocha", "Latte", "Capuccino", "Americano"];
let numberOfCoffees = coffees.length ;
function iterateOverArray() {
var li = document.createElement("li");
li.innerText = coffees[i];
ul.appendChild(li);
i++;
}
var printCoffees = setInterval(iterateOverArray, 1000);
setTimeout(() => {
clearInterval(printCoffees);
}, numberOfCoffees * 1001);
</script>